<template>
  <div class="searchinfo">
    <div class="title">
     <span class="serachres">搜索关键字:{{keysworld}}</span>  
     <span class="result">大约搜索了{{searchdata}}个结果</span>
    </div>
    <!-- 标签页 -->
    <div >
    <el-tabs v-model="activeName" @tab-click="handleClick" >
    <el-tab-pane label="歌曲" name="first" >
       <el-table
       @row-click='player'
      :data="musiclist"
      style="width: 100%">
      <el-table-column type='index'></el-table-column>
      <el-table-column label='音乐标题' prop='name'></el-table-column>
      <el-table-column label='歌手'   >
        <template slot-scope="scope" >
          {{scope.row.artists[0].name}}
        </template>
      </el-table-column>
      <el-table-column label='专辑'>
           <template slot-scope="scope">
          {{scope.row.album.name}}
        </template>
      </el-table-column>
      <el-table-column label='时长' >
           <template slot-scope="scope">
           
          {{scope.row.duration |  timeinfo}}
        </template>
      </el-table-column> 
    </el-table>
    </el-tab-pane>
    <el-tab-pane label="歌单" name="second">
      <div class="musicmenuall">
      <div v-for="(item) in musicmenu" :key="item.id" class="musicmenuitem">
        <div class="image">
          <img :src="item.coverImgUrl" @click="pushdetias(item.id)">
        </div>
        <div class="conetnt">
          <p class="name">{{item.name}}</p>
          <p class="playcount">播放次数:{{item.playCount | thousand}}</p>
        </div>
         </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="MV" name="third" >
      <div class="mvslist">
        <div v-for="item in mvslist" :key="item.id" class="mvitem">
          <div class="content">
            <img :src="item.cover" @click="playermv(item.id)">
            <p class="name">{{item.name}}</p>
            <p class="author">{{item.artistName}}</p>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
  <!-- 分页 -->
   <el-pagination
      @current-change="handleCurrentChange"
      background
      :page-size="15"
      layout="prev, pager, next"
      :total='1000'>
    </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name:'result',
    data () {
      return {
        keysworld:'',
        limit:15,
        type:1,
        searchdata:0,
        musiclist:[],
        activeName:'first',
        offset:0,
        musicmenu:[],
        musictabs:{},
        mvslist:[]
      }
    },
   created () {
     this.keysworld=this.$route.query.keywords
     this.searchinfo()
   },
   filters: {
     timeinfo(time){
        const date =new Date(time)
        const mm = (date.getMinutes() + '').padStart(2,'0')
        const ss = (date.getSeconds() + '').padStart(2,'0')      
        return `${mm}:${ss}`
     },
     thousand(number){
       if(number>10000){
         return (number/10000).toFixed(2)+'万'
       }else{
         return number
       }
     }
   },
   methods: {
     async searchinfo(){
      let res =  await this.$http.get('search',
      {params:{
      keywords:this.keysworld,
      limit:this.limit,
      offset:this.offset,
      type:this.type,
      }} )
      // console.log(res)
      this.searchdata = res.data.result.songCount
      this.musiclist =  res.data.result.songs
     },
     handleCurrentChange(){
       this.offset +=15
       this.searchinfo()
       this.handleClick(this.musictabs)
     },
    async player(row){
      // console.log(id)
       let res =await this.$http.get('song/url',{params:{id:row.id}})
      this.$parent.player = res.data.data[0].url
     },
    //  获取歌单数据
   async handleClick(tabs){
      this.musictabs = tabs
      if(tabs.index === '1'){
      const res = await this.$http.get('search',{params:{
      keywords:this.keysworld,
      limit:this.limit,
      offset:this.offset,
      type:1000
      }})
      this.musicmenu =res.data.result.playlists
      console.log(this.musiclist)
      }else {
      const res = await this.$http.get('search',{params:{
      keywords:this.keysworld,
      limit:12,
      offset:this.offset,
      type:1004
      }})
      console.log(res)
      this.mvslist =res.data.result.mvs 
      }
      
    },
    //进入详情歌单页
    pushdetias(id){
      this.$router.push(`/playlist?id=${id}`)
    },
    //播放mv
    playermv(id){
      this.$router.push(`/mv?id=${id}`)
    }
   }
  }
</script>

<style lang="less" scoped>
 .searchinfo{
   margin:100px 0 0 200px;
  .title{
   .serachres{
     font-size: 22px;
     color: black;
     font-weight: bolder;
   }
   .result{
     font-size: 13px;
   }
  }
  .musicmenuall{
    margin:30px 0 0 20px;
    display: flex;
    flex-wrap: wrap;;
    .musicmenuitem{
      position:relative;
      margin: 10px 0 0 20px;
      width: 200px;
      .image{
        img{
          width: 200px;
          height: 200px;
          border-radius: 10px;
        }
      }
      .conetnt{
        .playcount{
          position: absolute;
          color: #fff;
          font-size: 13px;
          bottom: 220px;
          left: 80px;
        }
      }
    }
  }
  .mvslist{
    display: flex;
    flex-wrap: wrap;
    .mvitem{
      margin: 20px 0 30px 20px;
      width: 250px;
      .content{
        img{
          width: 250px;
          height: 140px;
          border-radius: 10px;
        }
        .name{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 16px;
        }
        .author{
          font-size: 14px;
          color: #ccc;
        }
      }
    }
  }
 }
 .el-pagination{
   text-align: center;
   margin: 20px 0  90px 0;
 }
</style>